<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程表 (jQuery版)</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="../css/course.css">
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-dark custom-navbar">
        <a class="navbar-brand" href="#">我的课程管理</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="切换导航">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="./index.html">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="./course.html">课表</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="./login.html">登录</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="./reg.html">注册</a>
                </li>
            </ul>
        </div>
    </nav>

    <div class="container my-4">
        <h2 class="text-center mb-4">我的课程表 (jQuery版)</h2>
        <table class="table table-bordered course-table" id="courseTable">
            <thead>
                <tr>
                    <th>时间</th>
                    <th>周一</th>
                    <th>周二</th>
                    <th>周三</th>
                    <th>周四</th>
                    <th>周五</th>
                    <th>周六</th>
                    <th>周日</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>第1节</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>第2节</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>第3节</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>第4节</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>第5节</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th colspan="8">午休</th>
                </tr>
                <tr>
                    <td>第6节</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>第7节</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>第8节</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>第9节</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th colspan="8">晚饭时间</th>
                </tr>
                <tr>
                    <td>第10节</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>第11节</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>第12节</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>

    <footer class="bg-dark text-white text-center py-3">
        版权所有 © 2025
    </footer>

    <!-- 引入 jQuery、Popper 和 Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        $(function () {
            // 定义课表数据：12行 × 7列二维数组
            let courseData = [];
            const STORAGE_KEY = 'courseData';

            // 加载数据
            function loadCourseData() {
                const data = localStorage.getItem(STORAGE_KEY);
                if (data) {
                    courseData = JSON.parse(data);
                } else {
                    courseData = Array.from({ length: 12 }, () => Array(7).fill(''));
                }
            }

            // 保存数据
            function saveCourseData() {
                localStorage.setItem(STORAGE_KEY, JSON.stringify(courseData));
            }

            // 更新单元格内容
            function updateCell($cell, row, col, courseText) {
                courseData[row][col] = courseText;
                saveCourseData();
                if ($.trim(courseText) !== '') {
                    $cell.html(
                        `<div class="course-content">${courseText}</div>
             <div class="action-icons" style="display:none;">
               <i class="bi bi-pencil-square edit-icon"></i>
               <i class="bi bi-trash-fill delete-icon"></i>
             </div>`
                    );
                } else {
                    $cell.html(
                        `<div class="course-content"></div>
             <div class="action-icons" style="display:none;">
               <i class="bi bi-plus-circle add-icon"></i>
             </div>`
                    );
                }
                // 绑定双击事件
                $cell.off('dblclick').on('dblclick', function (e) {
                    e.stopPropagation();
                    showControls($cell);
                });
                // 点击页面其它区域时隐藏操作图标
                $('body').off('click').on('click', hideAllControls);
            }

            // 显示当前单元格的操作图标
            function showControls($cell) {
                hideAllControls();
                $cell.find('.action-icons').show();
                bindIconEvents($cell);
            }

            // 隐藏所有操作图标
            function hideAllControls() {
                $('.action-icons').hide();
            }

            // 为当前单元格绑定“新增”、“编辑”和“删除”事件
            function bindIconEvents($cell) {
                let row = parseInt($cell.attr('data-row'));
                let col = parseInt($cell.attr('data-col'));

                $cell.find('.add-icon').off('click').on('click', function (e) {
                    e.stopPropagation();
                    hideAllControls();
                    addCourse($cell, row, col);
                });
                $cell.find('.edit-icon').off('click').on('click', function (e) {
                    e.stopPropagation();
                    hideAllControls();
                    editCourse($cell, row, col);
                });
                $cell.find('.delete-icon').off('click').on('click', function (e) {
                    e.stopPropagation();
                    hideAllControls();
                    deleteCourse($cell, row, col);
                });
            }

            // 新增课程
            function addCourse($cell, row, col) {
                $cell.html(`<input type="text" class="course-input" placeholder="输入课程名称">`);
                let $input = $cell.find('.course-input');
                $input.focus().off('blur').on('blur', function () {
                    let value = $.trim($input.val());
                    updateCell($cell, row, col, value);
                });
            }

            // 编辑课程
            function editCourse($cell, row, col) {
                let currentText = $cell.find('.course-content').text();
                $cell.html(`<input type="text" class="course-input" value="${currentText}">`);
                let $input = $cell.find('.course-input');
                $input.focus().off('blur').on('blur', function () {
                    let value = $.trim($input.val());
                    if (value === '') {
                        if (confirm("是否确认输入信息为空会删除课程？")) {
                            updateCell($cell, row, col, '');
                        } else {
                            $input.focus();
                        }
                    } else {
                        updateCell($cell, row, col, value);
                    }
                });
            }

            // 删除课程
            function deleteCourse($cell, row, col) {
                updateCell($cell, row, col, '');
            }

            // 页面初始化
            loadCourseData();
            $('#courseTable tbody tr').each(function (rowIndex) {
                // 遍历除第一列外的单元格
                $(this).find('td').each(function (cellIndex) {
                    if (cellIndex === 0) return; // 跳过第一列（时间）
                    $(this).attr('data-row', rowIndex);
                    $(this).attr('data-col', cellIndex - 1);
                    let courseText = courseData[rowIndex][cellIndex - 1];
                    updateCell($(this), rowIndex, cellIndex - 1, courseText);
                });
            });

            // 点击页面其它区域时隐藏所有操作图标
            $('body').on('click', hideAllControls);
        });
    </script>
</body>

</html>